<template>
<div class="prediction-item-container">
  <div class="new-cst-item">
    <div class="new-info-head">
      <div 
      class="cst-baby-item" :class="{
        'boy': isBoy(value.baby_sex),
        'girl': !isBoy(value.baby_sex)
      }">{{ value.baby_info_str }}</div>
      <div class="follow-time">{{ value.insert_time }}</div>
    </div>
    <div class="new-info-body">
      <p v-if="propPosition === 'bodyTop'">客户类型：{{ value.custom_property | getUserByType }}</p>
      <p>跟进类型：{{ value.clue_type_str }}</p>
      <p>预计签约率：{{ value.prediction_ratio }}%</p>
      <p>预计签约金额：{{ value.prediction_sum | moneyFormate}}</p>
      <p>预计签约时间：{{ value.prediction_time }}</p>
    </div>
  </div>
  <confirm v-model="propConfirm"
        title="温馨提示"
        @on-confirm="setPropConfirm">
      <p style="text-align:center;">您确定要设置该客户为无效客户吗？</p>
    </confirm>
</div>
</template>
<script>
const moment = require('moment')
import {YB, YX, WX} from '../constants/user-prop'
import { mapActions, mapState } from 'vuex'
import Q from 'q'
import Confirm from 'vux/src/components/confirm'

export default {
  props: {
    value: {
      type: Object
    },
    client: {
      type : Object,
      require: true
    },
    custom_id: {
      type: String | Number
    },
    isChaChong: {
      type: Boolean,
      default: false
    },
    custom_type: {
      require:true
    },

    selectFollow: {
      default:false
    },
    showProp: {
      default: true
    },
    propPosition: {
      type: String | Number,
      default: 'bottom'
    }
  },
  data () {
    return {
      YB: YB,
      YX: YX,
      WX: WX,
      labelNameStr: '',
      propConfirm: false,
      setPropConfirm: function() {}
    }
  },
  watch: {
    labels () {
      this.initLabel();
    }
  },
  components: {
    Confirm
  },
  methods: {
    initLabel () {
      if (this.labels) {
        const labelNames = []
        this.labels.forEach((elem, index) => {
          labelNames.push('#' + elem.tagName + '#')
        })
        this.labelNameStr = labelNames.join(' ');
      }
    },
    changeProperty (type) {
      console.log('changeProperty', type)
      if (type === WX) {
        Q.Promise((resolve, reject) => {
          this.propConfirm = true
          this.setPropConfirm = resolve
        }).then(() => {
          this.sendPropSetting(type)
        })
      } else {
        this.sendPropSetting(type)
      }
    },
    sendPropSetting (type) {
      const params = {
        custom_id: this.custom_id,
        type: type
      }
      this.$vux.loading.show()

      return this.setCustomProperty(params)
        .then(() => {
          this.$vux.loading.hide()
          this.value = {
            ...this.value,
            custom_property: type
          }
        })
    },
    isBoy (baby) {
      return baby.baby_info_str ? baby.baby_info_str.indexOf('男') > -1 : (baby.baby_sex === 'FEMALE#' ? false : true)
    },
    getBabySexStr (baby) {
      return this.isBoy(baby) ? '男' : '女'
    },
    getBabyTitle (baby) {
      const babyBirthday = baby.baby_birthday + ' 0:0:0'
      return baby.baby_info_str ? baby.baby_info_str : baby.baby_name + '（' + this.getBabySexStr(baby)+'，' + this.ages(babyBirthday) + '）'
    },
    ages (beginStr, endStr) {
      if(!endStr) {
        endStr = moment().format('YYYY-MM-DD h:mm:ss')
      }
      try {
        var reg = new RegExp(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})(\s)(\d{1,2})(:)(\d{1,2})(:{0,1})(\d{0,2})$/);
        var beginArr = beginStr.match(reg);
        var endArr = endStr.match(reg);

        var days = 0;
        var month = 0;
        var year = 0;

        days = endArr[4] - beginArr[4];
        if (days < 0) {
            month = -1;
            days = 30 + days;
        }

        month = month + (endArr[3] - beginArr[3]);
        if (month < 0) {
            year = -1;
            month = 12 + month;
        }

        year = year + (endArr[1] - beginArr[1]);

        var yearString = year > 0 ? year + "岁" : "";
        var mnthString = month > 0 ? month + "月" : "";
        var dayString = days > 0 ? days + "天" : "";

        /*
         * 1 如果岁 大于等于1 那么年龄取 几岁 2 如果 岁等于0 但是月大于1 那么如果天等于0
  天小于3天 取小时
         * 例如出生2天 就取 48小时
         */
        var result = "";
        if (year >= 1) {
            result = yearString + mnthString;
        } else {
            if (month >= 1) {
                result = days > 0 ? mnthString + dayString : mnthString;
            } else {
                var begDate = new Date(beginArr[1], beginArr[3] - 1,
                        beginArr[4], beginArr[6], beginArr[8], beginArr[10]);
                var endDate = new Date(endArr[1], endArr[3] - 1, endArr[4],
                        endArr[6], endArr[8], endArr[10]);

                var between = (endDate.getTime() - begDate.getTime()) / 1000;
                days = Math.floor(between / (24 * 3600));
                var hours = Math.floor(between / 3600 - (days * 24));
                var dayString = days > 0 ? days + "天" : "";
                result = days >= 3 ? dayString : days * 24 + hours + "小时";
            }
        }
      } catch (e) {

      }
      return result;
    } ,
    jump () {
      if (!this.$listeners || !this.$listeners.jump) {
        const value = this.value
        this.$router.push({
          path: this.selectFollow ? 'add-follow': 'normal-clients-detail',
          query:{
            custom_id: value.id,
            custom_type: this.custom_type,
            id: value.id,
            back: this.selectFollow ? 'follow-record' : false,
            dd_nav_bgcolor: 'FF5E97F6',
            action: this.isChaChong ? 'search' : ''
          }})
      } else {
        this.$emit('jump', value)
      }
    },
    ...mapActions({
      setCustomProperty: 'setCustomProperty'
    })
  },
  beforeMount () {
    this.initLabel()
  }
}
</script>
<style lang="less">
  .prediction-item-container {
    .new-cst-item {
      border-bottom: 1px solid #f3f0f0;
      margin-bottom: 10px;
      padding: 10px 0px 0px 0px;
      background-color: white;
    }

    .new-info-bottom {
      border-top: 1px solid #f3f0f0;
      padding-left: 15px;
    }
    .new-info-title {
      font-size: 16px;
      color: 444;
    }

    .cst-cont {
      padding: 10px;
      float: right;
      position: relative;

      .cst-link-ico {
        right: 0;
      }
    }

    .cst-link-ico {
      content: " ";
      display: inline-block;
      height: 6px;
      width: 6px;
      border-width: 2px 2px 0 0;
      border-color: #C8C8CD;
      border-style: solid;
      -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
      transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
      position: relative;
      margin-top: -4px;
      right: 10px;
    }

    .new-info-body {
      color: #696969;
      padding-top: 8px;
      padding-bottom: 8px;
      padding-left: 15px;
      padding-right: 15px;
      min-height: 80px;
      font-size: 14px;
    }
    .new-info-body,.new-info-bottom {

    }

    .new-info-head {
      overflow: hidden;
      padding-left: 15px;
      padding-right: 15px;
    }

    .cst-baby-item {
      float: left;
      font-size: 14px;

       &.girl {
        color: #ff6698;
      }

      &.boy {
        color: #01aaef;
      }
    }

    .new-info-bottom  {
      color: #999;
      overflow: hidden;
      font-size: 12px;
    }

    .cst-info-body, .cst-info-bottom {
      color: #999999;
    }

    .cst-info-body {
      padding-bottom: 4px;
      font-size: 13px;
    }

    .follow-time {
      float: right;
      color: #cccccc;
      font-size: 12px;
      padding: 2px 0 2px 0;
    }

    .prop-label {
      float: left;
      padding: 2px 10px;
      border: 1px solid #cccccc;
      margin-right: 5px;
      border-radius: 4px;
      margin-top: 7px;

      &.select {
        border: 1px solid #01aaef;
        color: #01aaef;
        position: relative;
      }

      &.select::after {
        content: '';
        width: 12px;
        height: 14px;
        right: 0;
        bottom: 0;
        z-index: 10;
        display: block;
        background: url(//fin.91mycloud.com/box-checked.png) no-repeat center center ;
        background-size: cover;
        position: absolute;
      }
    }
  }
</style>
